require(['./config'],() => {
    require(['request','template','header','footer','zoom'],(req,template) => {
        class Shop{
            constructor(){
                this.totalCount = 0
                this.totalPrice = 0
                this.prodList = []
                this.init()
            }
            init(){
                //初始化页面 根据localStarage 里面的数据 渲染页面
                // 先把prodList 取出来
                let prodList = localStorage.getItem('prodList') ? JSON.parse(localStorage.getItem('prodList')) : []
                // console.log(prodList)
                $('.s-p-g').html(template('cartTemplate',{prodList}))
                $('.l-c-t').html(template('likeTemplate',{prodList}))
                this.initZoom()
                this.total(prodList)
                this.prodList = prodList
                this.bindDelEvent()

            }
            //计算所有的商品数量和总价
            total(prodList){
                this.totalCount = 0
                this.totalPrice = 0
                prodList.forEach(item => {
                    this.totalCount += item.count 
                    this.totalPrice +=  item.count * item.price
                })
                // console.log(this.totalPrice)
                // console.log(this.totalCount)
                $('.s-p').text(this.totalCount)
                $('.s-l').text(this.totalPrice.toFixed(2))
                $('.s-h-a').text(this.totalPrice.toFixed(2))
            }
            //绑定删除事件
            bindDelEvent(){
                $('.s-p-g')[0].onclick = e => {
                    // console.log(e)
                    const target = e.target 
                     //获取id 
                     const id = $(target).attr('prodId') - 0
                    //判断点击的是不是删除按钮
                    // console.log(target)
                    if(target.nodeName === 'A' && target.className.indexOf('del-btn') != -1){
                        //点击的是删除
                        // console.log(id)
                        //在数组中进行对比找到这一条数据并且删除
                        this.prodList.forEach((item,index) => {
                            if(item.id === id){
                                this.prodList.splice(index,1)
                            }
                        })
                        // console.log(this.prodList)
                        //重新保存到localStorage
                        localStorage.setItem('prodList',JSON.stringify(this.prodList)) 
                        this.init()
                    }

                    //点击加减
                    if(target.nodeName === 'A' && $(target).hasClass('res')){
                        //点击的是—
                        this.prodList.forEach(item => {
                            if(item.id === id){
                                item.count <= 1 ? '' : item.count--
                            }
                        })
                    }
                    if(target.nodeName === 'A' && $(target).hasClass('add')){
                        //点击的是+
                        this.prodList.forEach(item => {
                            if(item.id === id){
                                item.count++
                            }
                        })
                    }
                    //重新保存到localStorage
                    localStorage.setItem('prodList',JSON.stringify(this.prodList)) 
                    this.init()
                }
            }
            initZoom(){
                // console.dir($)
                $('.zoom-image').elevateZoom()
            }
        }
        return new Shop()
    })
})